<div>
  <div class="searchItem">
    <label>综合搜索：</label>
    <input nz-input placeholder="用户ID/昵称/手机号码" [(ngModel)]="table.query.user"/>
  </div>
  <div class="searchItem">
    <label>注册时间：</label>
    <nz-range-picker id="startDate" nzFormat="yyyy-MM-dd" [(ngModel)]="table.query.registerTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
</div>
<!--表格-->
<nz-table
  #rowSelectionTable
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="table.listData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="table.listData.total"
  [(nzPageIndex)]="table.query.page"
  [(nzPageSize)]="table.query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">用户ID</th>
    <th nzAlign="center">昵称</th>
    <th nzAlign="center">手机号码</th>
    <th nzAlign="center">最近登录时间</th>
    <th nzAlign="center">注册时间</th>
    <th nzAlign="center" nzWidth="160px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of rowSelectionTable.data">
    <td nzAlign="center">{{ data['id'] }}</td>
    <td nzAlign="center">{{ data['nickname'] }}</td>
    <td nzAlign="center">{{ data['phone'] }}</td>
    <td nzAlign="center">{{ data['lastLoginTime'] }}</td>
    <td nzAlign="center">{{ data['regTime'] }}</td>
    <td nzAlign="center">
      <a (click)="showUserModal(data)">详情</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ table.listData.total }} 条</ng-template>


<!--取消订单-->
<nz-modal
  [(nzVisible)]="userModal.visible"
  nzTitle="用户详情"
  [nzFooter]="null"
  (nzOnCancel)="hideUserModal()">
  <div *nzModalContent>
    <div style="text-align: center">
      <img
        nz-image
        width="120px"
        height="120px"
        [nzSrc]="userModal.data['userImg']||''"
        style="border-radius: 60px"
      />
    </div>
    <div class="userModalRow">
      <span>用户ID</span>
      <span>{{ userModal.data['id'] }}</span>
    </div>
    <div class="userModalRow">
      <span>状态</span>
      <span>{{STATUS[userModal.data['status']]}}</span>
    </div>
    <div class="userModalRow">
      <span>手机号码</span>
      <span>{{ userModal.data['phone'] }}</span>
    </div>
    <div class="userModalRow">
      <span>微信OpenId</span>
      <span>{{ userModal.data['openid'] }}</span>
    </div>
    <div class="userModalRow">
      <span>昵称</span>
      <span>{{ userModal.data['nickname'] }}</span>
    </div>
    <div class="userModalRow">
      <span>性别</span>
      <span>{{ SEX(userModal.data['sex']) }}</span>
    </div>
    <div class="userModalRow" *ngIf="userModal.data['birthday']">
      <span>生日</span>
      <span>{{ userModal.data['birthday'] }}</span>
    </div>
    <div class="userModalRow">
      <span>地区</span>
      <span>{{ cityChangeName(userModal.data['city']) }}</span>
    </div>
    <div class="userModalRow">
      <span>注册时间</span>
      <span>{{ userModal.data['regTime'] }}</span>
    </div>
    <div class="userModalRow">
      <span>最近登录时间</span>
      <span>{{ userModal.data['lastLoginTime'] }}</span>
    </div>
  </div>
</nz-modal>
